<template>
    <div class="app-container">
        <a-row :gutter="10">
            <a-col :span="7">
                <a-card title="个人信息">
                    <img v-if="avatar" v-image="avatar" class="avatar" @click="open" />
                    <a-list class="userinfo" item-layout="horizontal" size="small">
                        <a-list-item>
                            <align-left-outlined />所属部门
                            <template #actions>
                                {{ list.sysDepartName }}
                            </template>
                        </a-list-item>
                        <a-list-item>
                            <user-outlined />用户角色
                            <template #actions>
                                {{ list.sysRoleName }}
                            </template>
                        </a-list-item>
                        <a-list-item>
                            <profile-outlined />用户职位
                            <template #actions>
                                {{ list.sysJobName }}
                            </template>
                        </a-list-item>
                    </a-list>
                </a-card>
            </a-col>
            <a-col :span="17">
                <a-card title="基本资料">
                    <a-tabs v-model:active-key="active">
                        <a-tab-pane key="info" tab="基本资料">
                            <info ref="infoRef" @close="onClose" />
                        </a-tab-pane>
                        <a-tab-pane key="pass" tab="修改密码">
                            <pass @close="onClose" />
                        </a-tab-pane>
                    </a-tabs>
                </a-card>
            </a-col>
        </a-row>
        <cropper-modal ref="modalRef" @close="onCropper" />
    </div>
</template>
<script setup name="UserinfoModule">
import { ref, nextTick, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { AlignLeftOutlined, UserOutlined, ProfileOutlined } from '@ant-design/icons-vue'
import { getUserInfo, updateAvatar } from '/@/api/System/User'
import { useTabsStore } from '@iframe/tools/store/modules/tabs'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios'
import CropperModal from './Cropper/Modal.vue'
import { useUserinfoStore } from '@iframe/tools/store/modules/userinfo'
import Pass from './Pass/index.vue'
import Info from './Info/index.vue'

const tabsStore = useTabsStore()
const router = useRouter()
const route = useRoute()
const active = ref('info')
const infoRef = ref()
const avatar = ref('')
const modalRef = ref()
const userinfoStore = useUserinfoStore()

const list = reactive({
    sysDepartName: null,
    sysRoleName: null,
    sysJobName: null
})
nextTick(() => {
    getUserInfo().then(result => {
        if (result.code === SUCCESS_CODE) {
            infoRef.value.setForm({
                username: result.data.username,
                realname: result.data.realname,
                email: result.data.email,
                birthday: result.data.birthday,
                phone: result.data.phone,
                sex: result.data.sex,
                workNo: result.data.workNo
            })
            list.sysDepartName = result.data.sysDepartName
            list.sysRoleName = result.data.sysRoleName
            list.sysJobName = result.data.sysJobName
            avatar.value = result.data.avatar
        }
    })
})
const open = () => {
    modalRef.value.open(avatar.value)
}
const setAvatar = url => {
    avatar.value = url
}
const onCropper = avatar => {
    updateAvatar({ avatar }).then(result => {
        if (result.code === SUCCESS_CODE) {
            userinfoStore.setAvatar(avatar)
            setAvatar(avatar)
        }
    })
}

const onClose = () => {
    const index = tabsStore.getTabs.findIndex(item => item.url === route.path)
    const url = tabsStore.getTabs[index - 1].url
    router.push(url)
    tabsStore.removeTabs(route.path)
}
</script>
<style lang="less" scoped>
.avatar {
    width: 220px;
    height: 220px;
    border-radius: 220px;
    margin: 50px auto;
    display: block;
}
.btn-container {
    padding-left: 200px;
    :deep(.ant-btn) {
        margin: 5px;
    }
}
.userinfo {
    :deep(.anticon) {
        margin-right: 6px;
    }
}
</style>
